<template>
  <el-container>
    <el-header>
      <div class="picture">
        <img src="http://www.mifengzhujia.cn/img/logo.png" alt>
      </div>
      <div class="title">蜜蜂筑家后台管理系统</div>
      <!-- <el-button type="success"  @click="open">退出</el-button> -->
      <div class="btns">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="avater">
            
            <i class="el-icon-s-custom" style="font-size:30px;color:#fff"></i>
            <span style="color:#fff;font-size:18px;padding:0 30px">欢迎：{{username}}</span>
            <i class="el-icon-arrow-down" style="font-size:16px;color:#fff;padding-right:20px"></i>
           
          </span>
          <el-dropdown-menu slot="dropdown" >
            <!-- <el-dropdown-item icon="el-icon-user" :command="1">个人中心</el-dropdown-item>
            <el-dropdown-item icon="el-icon-edit" :command="2">修改密码</el-dropdown-item> -->
            <el-dropdown-item icon="el-icon-switch-button" :command="3">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
     
    </el-header>
    <el-container >
      <el-aside :width=" isCollapse ? '64px' : '200px'">
        <!-- 侧边导航栏 -->
            <el-menu
              :default-active='nowPath'
              :collapse-transition='flag'
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
             :unique-opened='false'
              :collapse="isCollapse"

            >
              <div class="toggle" @click="close">|||</div>
              <el-submenu :index="e.path" v-for="e in meunList" :key="e.id">
                <template slot="title">
                  <i :class="iconsObj[e.authName]" style="color:#fff"></i>
                  <span style="margin:0 10px">{{e.authName}}</span>
                </template>
                <el-menu-item :index="'/'+ et.path" v-for="et in e.children" :key="et.id" @click="savePath(et.path)">
                <i :class="iconsObj[e.authName]" style="color:#fff"></i>
                <span style="margin:0 10px">{{et.authName}}</span>
                </el-menu-item>
              </el-submenu>
            </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <!-- 子路由 -->
          <router-view></router-view>
        </el-main>
   
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {mapActions,mapState} from 'vuex';
export default {
  data() {
    return {
      username:sessionStorage.getItem('token'),
      isCollapse: false,
      flag: false,
      iconsObj: {
        '商品管理': 'i i-shangpin',
        '商品列表': 'i i-shangpin',
        '商品分类': 'i i-shangpin',
        '品牌管理': 'i i-shangpin',
        '订单管理': 'i i-dingdanguanli',
        '订单列表': 'i i-dingdanguanli',
        '拆单管理': 'i i-dingdanguanli',
        '拆单列表': 'i i-dingdanguanli',
        '优惠券管理': 'i i-dingdanguanli',
        '优惠券列表': 'i i-dingdanguanli',
        '退货管理': 'i i-tuihuo1',
        '系统管理': 'i i-xitongguanli',
        '角色管理': 'i i-xitongguanli',
        '用户管理': 'i i-xitongguanli',
        
      }
    }
  },
  created() {
    this.$store.dispatch('getMenu')
  },
  computed: {
    ...mapState(['meunList']),
    nowPath(){
      let upth = this.$route.path
      return upth
    }

  },
  methods: {
    // 请求菜单
    handleCommand(e){
      if(e===3){
        this.outLogin()
      }
    },
    // 退出逻辑
    outLogin() {
      this.$confirm('将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          window.sessionStorage.clear()
          this.$router.push('/login')
          this.$operateTip()
        })
        .catch(() => {
         
        })
    },
    // 收起菜单
    close() {
      this.isCollapse = !this.isCollapse
    },
    savePath(val) {
      window.sessionStorage.setItem('nowPath', val)
    },
    
    
    
  }
}
</script>

<style lang='less' scoped>
.el-container {
  height: 100%;
}
.el-header{
  background-color: #373d41;
  color: #fff;
  font-size: 25px;
  font-weight: 700px;
  text-align: center;
  position: relative;
  line-height: 60px;
  .title {
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
  }
  .picture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin: 5px 0 0 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    cursor: pointer;
  }
}

.el-aside {
  background-color: #333744;
  color: #fff;
  .el-menu {
    border: none;
  }
  .toggle {
    letter-spacing:0.25em;
    cursor:pointer;
    text-align:center;
    width:100%;
    padding: 5px 0;
  }

}
body > .el-container {
  margin-bottom: 40px;
}
</style>
